<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

<script>
  // 1. 创建一个新的promise对象
  const p = new Promise((resolve, reject) => {
    // 执行器函数
    // 2. 执行异步任务
    /* setTimeout(() => {
      const time = Date.now() // 偶数成功 奇数失败
      if (time % 2 === 0) {
        resolve('成功的数据 time = ' + time)
      } else {
        reject('失败的数据 time = ' + time)
      }
    }, 2000) */
    // 3.1 如果成功了 调用resolve(value)
    // 3.2 如果失败了 调用reject(reason)
  })

  /* p.then(
    value => {
      // 接收到成功的value数据
      console.log(value)
    },
    reason => {
      // 接收到失败的reason数据
      console.log(reason)
    }
  ) */

  // ----------------------------------------------------------------

  /* 
  
  1. 如何改变 promise 的状态?
    (1) resolve(value): 如果当前是 pendding 就会变为 resolved
    (2) reject(reason): 如果当前是 pendding 就会变为 rejected
    (3) 抛出异常:如果当前是pendding就会变为rejected
  
  */

  // ----------------------------------------------------------------

  /* 
  
  2. 一个 promise 指定多个成功/失败回调函数, 都会调用吗? 
    当 promise 改变为对应状态时都会调用
  
  */

  // ----------------------------------------------------------------

  /* 

  3. 改变 promise 状态和指定回调函数谁先谁后?
    (1) 都有可能, 正常情况下是先指定回调再改变状态, 但也可以先改状态再指定回调 (2) 如何先改状态再指定回调?
      1 在执行器中直接调用 resolve()/reject()
      2 延迟更长时间才调用 then()
      3 什么时候才能得到数据?
        1 如果先指定的回调, 那当状态发生改变时, 回调函数就会调用, 得到数据 
        2 如果先改变的状态, 那当指定回调时, 回调函数就会调用, 得到数据

  */

  // ----------------------------------------------------------------

  /* new Promise((resolve, reject) => {
    resolve(1)
  })
    .then(
      res => {
        console.log('onResolded1()', res)
      },
      err => {
        console.log('onResolded1()', err)
      }
    )
    .then(
      res => {
        console.log('onResolded2()', res)
      },
      err => {
        console.log('onResolded2()', err)
      }
    ) */

  /*

  4. Promise.then()返回的新 promise 的结果状态由什么决定?

    (1) 简单表达:由then()指定的回调函数执行的结果决定
    (2) 详细表达:
      1 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常
      2 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值
      3 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

  .then里面指定的回调函数到底谁执行 由调用.then的promise对象来决定
  而.then返回的promise(是返回成功态，还是失败态) 由谁来决定，由.then传入的回掉函数的返回结果来决定

  */

  // ----------------------------------------------------------------

  /* 
  
  5. promise 异常传透?
    (1) 当使用promise的then链式调用时,可以在最后指定失败的回调, 
    (2) 前面任何操作出了异常, 都会传到最后失败的回调中处理

  */

  new Promise((resolve, reject) => {
    reject(1)
  })
    .then(
      res => {
        console.log('res1()', res)
      },
      err => {
        console.log('err1()', err) // 1 Promise返回失败太 执行err回调函数 返回了undefined
      }
    )
    .then(
      res => {
        console.log('res2()', res) // 上一次then回调函数返回undefined 执行res回调函数 因为是成功态
      },
      err => {
        console.log('err2()', err)
      }
    )
    .catch(err => {
      // 此时catch就不会执行了 因为没有失败态传下来 所以catch的捕获也是一层层捕获的 并非第一次为失败态 就直接被catch捕获到了
      console.log('err', err + 'xxxxx') 
    })

  // ----------------------------------------------------------------

  /* 
  
  6. 中断 promise 链?
    (1) 当使用promise的then链式调用时,在中间中断,不再调用后面的回调函数 
    (2) 办法:在回调函数中返回一个pendding状态的promise对象
  
  */
</script>
